#{extends 'main.html' /}
#{set title:'Give2Get - Advanced Search' /}

<div id="search_container" class="white round">
    <form id="advanced_search_form" action="/search" method="POST" accept-charset="utf-8" enctype="application/x-www-form-urlencoded" >
    <div id="basic_search_container" class="black round">
        <div id="search_menu">
            <p class="table_title">Search</p>
            <label class="logintitle">Keyword</label>
            <br/>
            <input type="text" name="keyword" alt="search_menu" title="Keyword" value="${keyword}" id="keyword" class="validate[required, minSize[3], custom[onlyLetterNumber]]"/>
            <br/>
            <br/>
            <label class="logintitle">User</label>
            <br/>
            <input type="text" name="provider" alt="search_menu" title="Provider" value="${provider}" id="provider" class="validate[custom[onlyLetterNumber]]"/>
            <br/>
            <br/>
                <input id="search_button" type="image" src="@{'/public/images/search_button.png'}" name="search" value="search"/>
        </div>
    </div>

    <div id="detailed_search_container_1" class="white round">

            <p class="table_title">&nbsp;</p>
                #{field 'startdate'}
                    <div class="signupelement" id="div_startdate">
                        <label class="signuptitle">Start Date</label><br>
                        <input name="startdate" class="dateClass" type="text" id="searchStartDate2" value="${flash.startdate}">
                        </input>
                    </div>
                #{/field}


                #{field 'enddate'}
                    <div class="signupelement" id="div_enddate">
                        <label class="signuptitle">End Date</label><br>
                        <input name="${field.name}" class="dateClass" value="${flash.enddate}" id="searchEndDate2" type="text">
                        </input>
                    </div>
                #{/field}
                
    </div>

    <div id="detailed_search_container_2" class="white round">
            <p class="table_title">Optional Search Parameters</p>
                #{field 'city'}
                    <div class="signupelement" id="div_sehir">
                        <label class="signuptitle">City</label><br>
                        <select id="sehirler" name="${field.name}" onchange="javascript:fetchIlceler()">
                            #{list sehirler, as:'sehir'}
                            <option value="${sehir.id}">${sehir.name}</option>
                            #{/list}
                        </select>            
                    </div>
                #{/field}


                #{field 'ilce'}
                    <div class="signupelement" id="div_ilce">
                        <label class="signuptitle">District</label><br>

                        <select id="ilceler" name="${field.name}" onchange="javascript:fetchSemtler(ilceler.selectedIndex)">
                            #{list ilceler, as:'ilce'}
                            <option value="${ilce.id}">${ilce.name}</option>
                            #{/list}
                        </select>            
                    </div>
                #{/field}


                #{field 'semt'}
                    <div class="signupelement" id="div_semt">
                        <label class="signuptitle">Neighborhood</label><br>

                        <select id="semtler" name="${field.name}">
                            #{list semtler, as:'semt'}
                            <option value="${semt.id}">${semt.name}</option>
                            #{/list}
                        </select>            
                    </div>
                #{/field}

    </div>
</div>

</form>
<br/>
            
<div class="maincontainer white round padding20px">
   <table id="main" width="100%">
		<tr>

            <td width="85%" id="table_data_right">
                <div id="result">
                	<p class="table_title">Search Result</p>
                    #{if services.size > 0}
                    <table id="search_result">
                    	<thead>
                           <tr>
                               <th>Title</th>  
                                <th>Description</th>                                    
                                <th>StartDate</th>
                                <th>EndDate</th>
                                <th>Status</th>
                                <th>ProviderName</th>
                           </tr>
                        </thead>
                        <tbody>
                        #{list services, as:'service'}
                        <tr class="${service.oddOrEven}">
                            <td><a href="/service/${service.id}">${service.title.length() > 200 ? service.title[0..200] + '..' : service.title}</a></td>
                            <td style="text-align:center;">${service.description.length() > 200 ? service.description[0..200] + '..' : service.description}</td>                            
                            <td style="text-align:center;">${service.startDate}</td>
                            <td style="text-align:center;">${service.endDate}</td>
                            <td style="text-align:center;">${service.status}</td>
                            <td><a href="/user/${service.providerId}">${service.providerFullName}</a></td>
                        </tr>
                        #{/list}
                        </tbody>
                    </table>
                    #{/if}
                    #{else}
                    <p align="center">We couldn't find any services matching your search.</p>
                    #{/else}
                </div>
			 </td>
      </tr>
 	</table>
 </div>
 
 <script type="text/javascript">
 function copy() {
	 document.getElementById('date').value = document.getElementById('dateSelected').value ;
	}
</script>
